<template>
	<scroll-view scroll-y="true" style="height: 100vh;">
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</scroll-view>
</template>

<script>
	export default{
		data(){
			return{
				id:'',
				content:''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getIndexBlindboxrules()
		},
		methods:{
			getIndexBlindboxrules() {
				this.$api
					.indexBlindboxrules({
						activity_id: this.id
					})
					.then(res => {
						if (res != null) {
							this.content = res.rules;
						}
					});
			},
		}
	}
</script>


<style lang="scss" scoped>
.warp {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.body {
	width: 522rpx;
	background: #FFFFFF;
	box-shadow: 0 5rpx 2rpx 1rpx rgba(207, 207, 207, 0.25);
	border-radius: 20rpx;
	text-align: center;
	padding: 30rpx;
	
	.title {
		font-size: 28rpx;
		font-weight: bold;
		padding: 20rpx 0;
		text-align: center;
	}
	
	.content {
		font-size: 28rpx;
		text-align: justify;
		line-height: 2;
	}
}
.close{
	margin-top: 46rpx;

	.closeicon{
		width: 52rpx;
		height: 50rpx;
	}
}
</style>